클라이언트와 서버 데이터 연동 (거래) 테스트

화면과 서버의 CRUD 요청 및 데이터 바인딩 알아보기

QCN

전달하려는 주요 내용

  • 클라이언트(화면)와 서버가 데이터를 주고받는 '거래'의 개념을 이해합니다.
  • HandStack에서 제공하는 두 가지 거래 방식의 차이를 알아봅니다.
  • 거래에 필요한 요청/응답 정보 정의 방법을 학습합니다.
  • 거래 전후에 특정 로직을 실행하는 'Hook 이벤트'를 알아봅니다.
  • 실제 데이터 연동 과정을 실습하여 결과를 확인합니다.
QCN

거래란 무엇인가요?

HandStack 기반의 프로젝트에서 거래는 출발지와 도착지간의 데이터를 주고 받는 작업 단위를 의미합니다.

  • 클라이언트에서 업무 서버간에 거래를 한다
  • 업무 서버에서 메시지 서버간에 거래를 한다
  • 메시지 서버에서 데이터베이스 서버간에 거래를 한다
  • 메시지 서버에서 외부 서비스간에 거래를 한다

화면에서 업무 거래를 위해 클라이언트와 서버간에는 반드시 어떻게 요청과 응답이 이뤄질 것인지 계약을 정의 해야 합니다.

QCN

거래 방식: 어떻게 통신할까?

HandStack은 두 가지 거래 방식을 제공하여 유연한 개발을 지원합니다.

  • 선언 거래

    • 화면 JavaScript 에서 transaction 항목에 거래 정보를 선언합니다.
    • 간결하고 일관된 코드를 만들수 있습니다.
  • 직접 거래

    • 자바스크립트 코드 내에서 syn.$w.transactionDirect 함수를 호출하는 방식입니다.
    • 복잡한 조건 처리나 동적 데이터 구성이 필요할 때 사용합니다.
QCN

거래 정보 정의: 무엇을 주고받을까?

거래 정보는 입력|출력 형식으로 dataMapInterface 을 구성하여, 콤마(,)로 구분하여 여러 정보를 구성합니다.

  • 입력 정보 (클라이언트 -> 서버)

    • Row: 단일 건의 데이터 (예: 입력 폼 하나의 정보)
    • List: 여러 건의 데이터 (예: 그리드의 변경된 행 목록)
  • 출력 정보 (클라이언트 <- 서버)

    • Form: 단일 건의 데이터 (예: 상세 조회 결과)
    • Grid: 여러 건의 데이터 (예: 목록 조회 결과)
  • 조합 예시

    • Row|Form: 단일 건을 보내고 단일 건을 받음 (저장 후 상세조회)
    • List|Grid: 목록을 보내고 목록을 받음 (다수 항목 상태 변경)
QCN

거래 Hook 이벤트: 언제 개입할까?

거래의 특정 시점에 실행할 함수를 미리 정의하여 로직을 관리할 수 있습니다.

  • beforeTransaction

    • 서버로 거래를 요청하기 직전에 호출됩니다.
    • 주로 입력값 유효성 검사, 데이터 전처리, 사용자 확인 창 표시에 사용됩니다.
    • 이 함수에서 false를 반환하면 거래 실행이 중단됩니다.
  • afterTransaction

    • 서버로부터 응답을 받은 직후에 호출됩니다.
    • 주로 응답 데이터 후처리, 특정 UI 상태 변경, 결과 메시지 표시에 사용됩니다.
QCN

화면 요소와 데이터 바인딩

syn-datafield 속성을 사용하면 HTML 요소를 데이터와 쉽게 연결할 수 있습니다.

  • 서버에서 받은 formData 또는 gridData의 Key 값과 syn-datafield 값이 일치하는 요소에 자동으로 값이 채워집니다.
  • 서버로 보낼 때도 마찬가지로 해당 요소의 값을 자동으로 가져가 Row 또는 List 데이터를 구성합니다.
QCN

거래 로직 구현 구조

페이지별 자바스크립트 파일에 hooktransaction 객체를 정의하여 거래 관련 로직을 관리합니다.

'use strict';
let $TST010 = {
    hook: {
        beforeTransaction(transactConfig) {
            var functionID = transactConfig.functionID;
            if (functionID == 'LD02') {
            }
        },

        afterTransaction(error, functionID, responseData, addtionalData) {
            if (functionID == 'LD02') {

            }
        },
    },

    // 거래 메서드 선언
    transaction: {
        LD01: {
            inputs: [{ type: 'Row', dataFieldID: 'MainForm' }],
            outputs: [{ type: 'Grid', dataFieldID: 'DocumentList', clear: true }]
        },

        LD02: {
            inputs: [{ type: 'Row', dataFieldID: 'DocumentList' }],
            outputs: [{ type: 'Grid', dataFieldID: 'ReceiptList' }]
        }
    },
};

거래 계약 정보

클라이언트에서 요청되는 모든 데이터는 기본적으로 신뢰하지 않습니다.

  • TST 프로젝트의 TST010 거래를 LD01 서비스 ID로 요청을 확인합니다.
  • LD01 수신 정보는 인증 정보(Authorize)가 필요 한지 확인합니다.
  • 반환되는 데이터 포맷은 무엇인지 확인합니다.
  • 요청은 데이터베이스 요청으로 트랜잭션을 수행해야 하는지 확인합니다.
  • 요청 정보는 하나의 Row에 여러 Column으로 구성된 정보가 요청되며 이때 어떤 Fields 정보라도 허용합니다.
  • 응답 정보는 단일 Row 또는 여러 개의 구성된 정보가 반환되야 합니다.
  • 필수 요청 정보가 없을 경우 잘못된 요청 응답 처리를 수행합니다.
QCN

거래 요청과 응답 설정

{
    "ApplicationID": "HDS",
    "ProjectID": "TST",
    "TransactionID": "TST010",
    "Description": "테스트 > 첫번째 테스트 거래",
    "Services": [
        {
            "ServiceID": "LD01",
            "Authorize": false,
            "ReturnType": "Json",
            "CommandType": "D",
            "TransactionScope": false,
            "Inputs": [],
            "Outputs": []
        }
    ],
    "Models": []
}
QCN

요청/응답 정보 예시 확인하기

https://handstack.kr/docs/startup/learning/비즈니스-데이터-개발-시작하기#테스트

중요 항목

GlobalID: 고유 거래 ID

QCN

더미(Dummy) 데이터로 프론트엔드 테스트하기

백엔드 API가 준비되지 않았을 때, dummyfile 설정을 통해 프론트엔드 개발을 미리 진행할 수 있습니다.

  • $(HANDSTACK_HOME)/tmp/HDS/dummyfile 디렉토리 생성
  • [앱 ID]/[프로젝트 ID]/[거래 ID] 와 같이 디렉토리를 생성 (HDS/TST/TST020)
  • [기능 ID]에 해당하는 .dat 데이터 파일을 저장

참고 더미 파일 경로: $(HANDSTACK_HOME)/modules/transact/wwwroot/transact/TST020/dummyfile

QCN

Postman 거래 호출하기

QCN

요약 정리 및 Q&A

이제 서버와 연동하는 기능을 담은 화면을 직접 만들 수 있게 되었네요! 점점 더 웹 개발이 재미있어지지 않나요?

  • HandStack의 거래 기능을 통해 복잡한 서버 통신을 간단하게 처리하는 방법을 배웠습니다.
  • 선언적 방식과 직접 호출 방식을 적절히 사용하여 생산성을 높일 수 있습니다.
QCN